html,
body
{
    height: 100%;
    padding: 0;
    margin: 0;
    /* min-width: 1366px; */
}
.item{
    width: 80px;
    height: 80px;
    /* background-color: #ffffff; */
    margin: 30px 30px;
    border-radius: 20%;

}
.icon {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    font-size: 80px;
 }
 .task-icon{
    width: 40px;
    height: 40px;
 }
 .item-name{
     text-align: center;
     color: #fff;
     letter-spacing: 5px;
     font-size: 15px;
     padding-top: 1px;
 }
 .task-item{
    position: relative;
    font-size: 1.5em;
    /* width: 33px;
    height: 31px; */
    border-radius: 2%;
    margin:0 6px;
    border: 1px solid #a7b7d4 ;
}
.task-item:hover{
    font-size: 1.7em;
    /* border: 1px solid #a7b7d4 ; */
    box-shadow: 0 0 10px #a7b7d4;
}
.middle{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
